@charset "UTF-8";

@mixin mq($args...) {
    $media-type: 'only screen';
    $media-type-key: 'media-type';
    $args: keywords($args);
    $expr: '';
    @if map-has-key($args, $media-type-key) {
        $media-type: map-get($args, $media-type-key);
        $args: map-remove($args, $media-type-key);
    }
    @each $key, $value in $args {
        @if $value {
            $expr: "#{$expr} and (#{$key}: #{$value})";
        }
    }
    @media #{$media-type $expr} {
        @content;
    }
}

////hidpi (http://bjango.com/articles/min-device-pixel-ratio/)
@mixin hidpi($ratio: 1.3) {
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min--moz-device-pixel-ratio: $ratio),
    only screen and (-o-min-device-pixel-ratio: #{$ratio} / 1),
    only screen and (min-resolution: round($ratio * 96dpi)),
    only screen and (min-resolution: $ratio * 1dppx) {
        @content;
    }
}

////screen
@mixin screen($min, $max, $orientation: false) {
    @include mq($min-width: $min, $max-width: $max, $orientation: $orientation) {
        @content;
    }
}

@mixin max-screen($max) {
    @include mq($max-width: $max) {
        @content;
    }
}

@mixin min-screen($min) {
    @include mq($min-width: $min) {
        @content;
    }
}

@mixin screen-height($min, $max, $orientation: false) {
    @include mq($min-height: $min, $max-height: $max, $orientation: $orientation) {
        @content;
    }
}

@mixin max-screen-height($max) {
    @include mq($max-height: $max) {
        @content;
    }
}

@mixin min-screen-height($min) {
    @include mq($min-height: $min) {
        @content;
    }
}

////orientation
@mixin landscape() {
    @include mq($orientation: landscape) {
        @content;
    }
}

@mixin portrait() {
    @include mq($orientation: portrait) {
        @content;
    }
}
